<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="jquery-3.5.1.min.js"></script>
    <!-- HTML结构 -->
    <div id="test-div">
        <ul>
            <li><span>JavaScript</span></li>
            <li><span>Python</span></li>
            <li><span>Swift</span></li>
        </ul>
    </div>


    <script>
        //除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：
        var ul = $('#test-div ul');

        //创建加入的节点
        var Pascal = document.createElement('li');
        Pascal.innerHTML = ('<span>Pascal</span>');

        var Lua = document.createElement('li');
        Lua.innerHTML = ('<span>Lua</span>');

        var Ruby = document.createElement('li');
        Ruby.innerHTML = ('<span>Ruby</span>');

        //加入节点
        ul.append(Pascal);
        ul.append(Lua);
        ul.append(Ruby);

        console.log(ul.text());
        var li = $('#test-div ul li');
        // var li2 = document.getElementsByTagName('li');

        //定义数组，把节点中的内容加入到数组中
        var x = [];
        for (let i = 0; i < li.length; i++) {
            x[i] = li[i].textContent;
        }

        //排序
        x.sort();
        console.log(x);
        
        //清空li节点
        $('#test-div ul li').remove();

        //添加排好序的li节点
        x.forEach(x =>{
            $('#test-div ul').append(`<li><span>${x}</span></li>`)
        });

        

        

        

        
        // 测试:
        ; (function () {
            var s = $('#test-div>ul>li').map(function () {
                return $(this).text();
            }).get().join(',');
            if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
                console.log('测试通过!');
            } else {
                console.log('测试失败: ' + s);
            }
        })();
    </script>
</body>

</html>